<template>
  <!-- 项目实施 - 8合同管理 -tab1 收款合同-->
  <div class="contract-management-proceeds">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
        <card-list :cardData="i" :idx="idx"></card-list>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <el-form class="search" :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="合同名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="相对方">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="合同编号">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 24 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
            <el-col :span="24">
              <el-button class="plan-approval-btn" @click="showModal('add')" type="primary" plain> 合同新增 </el-button>
              <el-button class="plan-approval-btn" @click="showModal('export')" type="primary" plain> 导入 </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <cust-act-table
          ref="custActTable"
          tableType="contractManagement"
          :list="tableData"
          :colConfigs="customColumns"
          @getDetail="getDetail"
          @changePage="changePage"
          @getSelectedRow="showModal('table')"
          :pageNum="page.pageNum"
          :pageSize="page.pageSize"
          :total="page.total"
          showIdx
          :showAct="true"
          rKey="index"
        ></cust-act-table>
      </el-col>
    </el-row>
    <!-- 新增、修改、查看 -->
    <el-dialog :title="modalTitle" class="btn-modal" :visible.sync="modalState" @close="closeModal('table')" width="900px" :close-on-click-modal="false">
      <modalBtns :modalType="modalType" @close="closeModal('table')"></modalBtns>
      <formName :text="tabName"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" ref="info1" :modalTitle="modalType == 'table' ? 'modalDetail' : 'EDIT-FORM'" :formList="formInfo.info1"></formPart>
        <formPart listTitle="相对方信息" ref="info2" :modalTitle="modalType == 'table' ? 'modalDetail' : 'EDIT-FORM'" :formList="formInfo.info2"></formPart>
        <formPart class="info-last-1" listTitle="收付款信息" ref="info3" modalTitle="EDIT-FORM" :formList="formInfo.info3"></formPart>
        <formPart class="info-last-2" :showListTitle="false" ref="info4" modalTitle="EDIT-TABLE" :formList="formInfo.info4"></formPart>
      </div>
    </el-dialog>
    <el-dialog :title="modalTitle" class="btn-modal" :visible.sync="modalState2" @close="closeModal('edit2')" width="650px" :close-on-click-modal="false">
      <modalBtns modalType="edit2"></modalBtns>
      <div class="form-content" style="width: 400px;margin:0 auto;">
        <formPart listTitle="合同信息" ref="info1" modalTitle="EDIT-FORM" :formList="editFormInfo.info1"></formPart>
        <formPart class="info-last" listTitle="收付款信息" ref="info2" modalTitle="EDIT-TABLE" :formList="editFormInfo.info2"></formPart>
      </div>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog :title="modalTitle" class="export-modal" :visible.sync="exportState" @close="closeModal('export')" width="90%" :close-on-click-modal="false">
      <div style="padding: 10px 20px 0;">
        <div class="progress">
          <img :src="exportPics[0]" height="100%">
        </div>
        <div class="btns">
          <el-button style="margin-right:8px;" type="primary"> 选择文件 </el-button>
          <el-button @click="downloadState = true"> 自定义模板下载 </el-button>
        </div>
        <div class="main-text">
          <img :src="exportPics[1]" style="width: 100%;margin:16px auto;">
        </div>
      </div>
      <p class="warning"> 注：整个过程中为避免数据丢失，请勿关闭窗口！ </p>
      <span slot="footer">
        <el-button @click="closeModal('export')">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 自定义模板下载 -->
    <el-dialog title="自定义模板下载" class="download-modal" :visible.sync="downloadState" @close="downloadState = false" width="600px" :close-on-click-modal="false">
      <img :src="exportPics[2]" style="width: 100%;margin-bottom:16px;">
      <span slot="footer">
        <el-button style="margin-right:8px;" type="primary" @click="downloadState = false"> 确定 </el-button>
        <el-button @click="downloadState = false"> 取消 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cardList from '../../components/cardList';
import advancedFilter from '../../components/advancedFilter';
import custActTable from "../custActTable.vue";
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import { tableData8, customColumns8 } from '../../js/staticData';
export default {
  name: "contractManagementProceeds",
  components: {cardList, advancedFilter, custActTable, modalBtns, formName, formPart},
  props: {
    tabName: {
      type: String,
      default: () => ''
    },
  },
  data() {
    let self = this;
    return {
      cardListData: [
        {
          img3: require('../../images/card-icon10.png'),
          line1: '签约数量',
          line3: '32'
        },
        {
          img3: require('../../images/card-icon3.png'),
          line1: '合同总额',
          line3: '779万'
        },
        {
          img3: require('../../images/card-icon6.png'),
          line1: self.tabName == '收款合同' ? '收款总额' : '付款总额',
          line3: '320.3万'
        },
        {
          img3: self.tabName == '收款合同' ? require('../../images/card-icon8.png') : require('../../images/card-icon9.png'),
          line1: self.tabName == '收款合同' ? '待收金额' : '待付金额',
          line3: '456.7万'
        }
      ],
      formData: {
        ipt1: '',
        ipt2: '',
        ipt3: '',
        ipt4: ''
      },
      exportPics: [
        require('../../images/htgl-pldrxd-img1.png'),
        require('../../images/htgl-pldrxd-img2.png'),
        require('../../images/htgl-pldrxd-img3.png'),
      ],
      showSearch: true,
      customColumns: customColumns8,
      tableData: tableData8[0],
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalState: false,
      modalState2: false,
      exportState: false,
      downloadState: false,
      modalType: '',
      modalTitle: '',
      formInfo: {
        info1: [
          { l: '合同名称', v: '蓝旗机器人造林', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
          { l: '合同编号', v: 'SKHT2022090204', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 6 },
          { l: '合同状态', v: '履行', type: 'select', option: [{l:'履行', v: '0'},{l:'终止', v: '1'},{l:'解除', v: '2'}, {l:'中止', v: '3'}], span: 6 },
          { l: '收支类型', v: '收款', type: 'select', option: [{l:'收款', v: '0'},{l:'付款', v: '1'}], span: 6 },
          { l: '签订日期', v: '', type: 'datePicker', span: 6 },
          { l: '有效期', v: '', type: 'datePicker', span: 6 },
          { l: '~', v: '', type: 'datePicker', span: 6 },
          { l: '合同文本', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'}, span: 12 },
          { l: '所属项目', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
        ],
        info2: [
          { l: '名称', v: '', type: 'input', span: 12 },
          { l: '编码', v: '', type: 'input', span: 6 },
          { l: '法人代表', v: '', type: 'input', span: 6 },
          { l: '联系人', v: '', type: 'input', span: 6 },
          { l: '联系方式', v: '', type: 'input', span: 6 },
          { l: '地址', v: '', type: 'input', span: 12 },
          { l: '开户行', v: '', type: 'input', span: 12 },
          { l: '银行账号', v: '', type: 'input', span: 12 },
        ],
        info3: [
          { l: '合同金额', v: '220,000.00', type: 'unitInput', unit: '元', span: 6 },
          { l: '收付款总额', v: '65,000.00', type: 'unitInput', unit: '元', span: 6 },
          { l: '剩余金额', v: '155,000.00', type: 'unitInput', unit: '元', span: 6 }
        ],
        info4: [
          {
            tableCol: [
              { label: '日期', prop: 'rq', slot: 'datePicker', width: 150 },
              { label: '金额', prop: 'je', slot: 'input' }
            ],
            tableData: [
              {
                rq: '2024-07-31',
                je: '65,000.00',
              }
            ],
            page: {
              pageNum: 1, // 当前页
              pageSize: 10, // 每页条数
              total: 0 // 总条数
            }
          }
        ]
      },
      editFormInfo: {
        info1: [
          { l: '合同名称', v: '蓝旗机器人造林', type: 'input', span: 24 },
          { l: '相对方', v: 'xx有限责任公司', type: 'input', span: 24 },
          { l: '合同金额', v: '220,000.00', type: 'input', span: 24 },
          { l: '收付款总额', v: '65,000.00', type: 'input', span: 24 },
          { l: '剩余金额', v: '155,000.00', type: 'input', span: 24 }
        ],
        info2: [
          {
            btns: ['新建', '删除', '更多'],
            tableCol: [
              { label: '日期', prop: 'rq', slot: 'datePicker', width: 150 },
              { label: '金额', prop: 'je', slot: 'input' }
            ],
            tableData: [
              {
                rq: '2024-07-31',
                je: '65,000.00',
              }
            ],
            page: {
              pageNum: 1, // 当前页
              pageSize: 10, // 每页条数
              total: 0 // 总条数
            }
          }
        ]
      }
    };
  },
  mounted() {
    console.log('tabName', this.tabName);
    this.$nextTick(() => {
      this.tableData = tableData8[0];
      this.customColumns = customColumns8;
    })
  },
  watch: {
    modalType(n){},
    tabName(n){},
  },
  methods: {
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      this.modalTitle = this.modalType == 'add' ? '新建' : this.modalType == 'edit1' ? '修改' : this.modalType == 'edit2' ? '修改' : this.modalType == 'export' ? '批量导入向导' : '查看';
      if(type == 'export') {
        this.exportState = true;
      } else if(type == 'edit2') {
        this.modalState2 = true;
        this.modalState = false;
      } else if(type == 'add' || type == 'edit1' || type == 'table') {
        if(type == 'add') {
          this.formInfo.info1.map(i => {i.v = ''});
          this.formInfo.info2.map(i => {i.v = ''});
          this.formInfo.info3.map(i => {i.v = ''});
          this.formInfo.info4[0].tableData = [{rq: '', je: ''}];
        } else {
          this.formInfo = {
            info1: [
              { l: '合同名称', v: '蓝旗机器人造林', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '合同编号', v: 'SKHT2022090204', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '合同状态', v: '履行', type: 'select', option: [{l:'履行', v: '0'},{l:'终止', v: '1'},{l:'解除', v: '2'}, {l:'中止', v: '3'}], span: 6 },
              { l: '收支类型', v: '收款', type: 'select', option: [{l:'收款', v: '0'},{l:'付款', v: '1'}], span: 6 },
              { l: '签订日期', v: '2024-06-31', type: 'datePicker', span: 6 },
              { l: '有效期', v: '2024-06-31', type: 'datePicker', span: 6 },
              { l: '~', v: '2024-07-31', type: 'datePicker', span: 6 },
              { l: '合同文本', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '所属项目', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
            ],
            info2: [
              { l: '名称', v: 'xx有限责任公司', type: 'input', span: 12 },
              { l: '编码', v: 'KH2022000204', type: 'input', span: 6 },
              { l: '法人代表', v: '浩', type: 'input', span: 6 },
              { l: '联系人', v: '', type: 'input', span: 6 },
              { l: '联系方式', v: '', type: 'input', span: 6 },
              { l: '地址', v: '', type: 'input', span: 12 },
              { l: '开户行', v: '', type: 'input', span: 12 },
              { l: '银行账号', v: '', type: 'input', span: 12 },
            ],
            info3: [
              { l: '合同金额', v: '220,000.00', type: 'unitInput', unit: '元', span: 6 },
              { l: '收付款总额', v: '65,000.00', type: 'unitInput', unit: '元', span: 6 },
              { l: '剩余金额', v: '155,000.00', type: 'unitInput', unit: '元', span: 6 }
            ],
            info4: [
              {
                tableCol: [
                  { label: '日期', prop: 'rq', slot: 'datePicker', width: 150 },
                  { label: '金额', prop: 'je', slot: 'input' }
                ],
                tableData: [
                  {
                    rq: '2024-07-31',
                    je: '65,000.00',
                  }
                ],
                page: {
                  pageNum: 1, // 当前页
                  pageSize: 10, // 每页条数
                  total: 0 // 总条数
                }
              }
            ]
          }
        }
        this.modalState = true;
      }
    },
    /**
     * @author Wrl
     * 点击列表操作栏按钮
     */
    getDetail(row) {
      if(typeof row == 'object' && row.actIdx) {
        this.rowIdx = row.actIdx;
      }
      if(this.rowIdx == '0'){
        this.showModal('edit1');
      } else if(this.rowIdx == '1') {
        this.showModal('edit2');
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'export') {
        this.exportState = false;
      } else if(type == 'edit2') {
        this.modalState2 = false;
      } else if(type == 'add' || type == 'edit1' || type == 'table') {
        this.modalState = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .contract-management-proceeds {
    ::v-deep {
      .card-item {
        cursor: unset;
      }
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .form-part {
        .el-card__body {
          padding-bottom: 0;
        }
      }
      .info-last {
        padding: 0 0 30px;
      }
      .info-last-1 {
        .el-card__body {
          padding: 20px 20px 0;
        }
      }
      .info-last-2 {
        .el-card__body {
          padding: 0 20px 30px;
        }
      }
      .btn-modal {
        .el-dialog__body {
          padding: 0 20px;
          text-align: center;
        }
      }
      .download-modal {
        .el-dialog__body {
          padding: 0;
        }
      }
      .export-modal {
        .el-dialog__body {
          padding: 0;
        }
        .progress {
          width: 100%;
          height: 46px;
        }
        .btns {
          margin-top: 10px;
        }
        .main-text {
          max-height: calc(80vh - 200px);
          overflow: overlay;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
        }
        .warning {
          color: red;
          font-size: 14px;
          width: 100%;
          height: 50px;
          line-height: 50px;
          background: #c8c8c8;
          padding: 0 20px;
          margin: 0;
        }
      }
    }
  }
</style>
